<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${message("添加电子围栏")}</title>
<link href="/resources/css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resources/js/reference/jquery.js"></script>
<script type="text/javascript" src="/resources/js/reference/jquery.validate.js"></script>
<script type="text/javascript" src="/resources/js/base/dialog.js"></script>
<script type="text/javascript" src="/resources/js/base/request.js"></script>
<script type="text/javascript" src="/resources/js/base/global.js"></script>
<script type="text/javascript" src="/resources/plugin/datePicker/WdatePicker.js"></script>
<script src="/resources/js/base/file.js"></script>
<link href="/resources/css/mmGrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/resources/js/reference/mmGrid.js"></script>
<!--地图-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xzQ89rGL61tuBjTdlQCRRlShOQ9WLTNd"></script>
<script type="text/javascript" src="/resources/js/mapJs/map_baidu.js"></script>
<link rel="stylesheet" href="/resources/js/mapJs/map_baidu.css" />
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="/resources/js/mapJs/DrawingManager_min.js"></script>
<link rel="stylesheet" href="/resources/js/mapJs/DrawingManager_min.css" />
<script type="text/javascript" src="/resources/js/mapJs/DistanceTool_min.js"></script>

<script type="text/javascript">
$().ready(function() {
	var $inputForm = $("#inputForm");
	var $addTerminal = $("#addTerminal");
	var $deleteTerminal = $("a.deleteTerminal");

	// 表单验证
	$inputForm.validate({
		rules: {
			name: {
				required: true
			},
			points: {
				required: function(){
					var isRequest = $("#type").val();
					isRequest = isRequest==1?true:false;
					return isRequest;
				}
			},
			longitude: {
				required: function(){
					var isRequest = $("#type").val();
					isRequest = isRequest==0?true:false;
					return isRequest;
				}
			},
			latitude: {
				required: function(){
					var isRequest = $("#type").val();
					isRequest = isRequest==0?true:false;
					return isRequest;
				}
			},
			radius: {
				required: function(){
					var isRequest = $("#type").val();
					isRequest = isRequest==0?true:false;
					return isRequest;
				}
			},
			saleOrgId: {
				required:true
			}
		},
		 submitHandler:function(form){
            $("#points").val( $("#hidPoints").val());
        }  
	});
	
	//查询机构
	$("#selectSaleOrg").bindQueryBtn({
		type:'saleOrg',
		title:'${message("查询机构")}',
		url:'/saleOrg/select_saleOrg.jhtml'
	});

	 $("form").bindAttribute({
	 	isConfirm:true,
	    callback: function(resultMsg){
	        $.message_timer(resultMsg.type,resultMsg.content,1000,function(){
				location.href= 'edit.jhtml?id='+resultMsg.objx;
			})
	    }
	 });
	 
	 
	 //终端设备
	 
	 //打开选择终端设备界面
    $addTerminal.click(function(){
        $addTerminal.bindQueryBtn({
            type:'terminal',
            bindClick:false,
            title:'${message("查询终端设备")}',
//             url:'/terminal/select_list.jhtml?multi=2&saleOrgId='+$("input[name='saleOrgId']").val(),
            url:'/terminal/select_list.jhtml?multi=2',
            callback:function(rows){
                if(rows.length>0){
                    for (var i = 0; i < rows.length;i++) {
                        var idH = $(".terminalId_"+rows[i].id).length;
                        if(idH > 0){
                            $.message_alert('终端设备编号【'+rows[i].terminal_num+'】已添加');
                            return false;
                        }
                    }
                    for (var i = 0; i < rows.length;i++) {
						var row = rows[i];
						$tmGrid.addRow(row,null,1);
					}
                }
            }
        }); 
    })
	 
	var terminalInItemIndex = 0;
 	var cols = [				
    	{ title:'${message("终端设备编号")}', name:'terminal_num' ,align:'center', width:110, renderer: function(val,item,rowIndex, obj){
			var	html = '<input type="hidden" name="terminalId" class="terminalId terminalId_'+item.id+'" value="'+item.id+'" />'+val;
			return html;}
		},
    	{ title:'${message("终端名称")}', name:'terminal_name' ,align:'center', width:110},
    	{ title:'${message("终端SIM卡号")}', name:'sim' ,align:'center', width:110},
    	{ title:'${message("终端设备类型")}', name:'type_value' ,align:'center' },
		{ title:'${message("终端设备型号")}', name:'model_value' ,align:'center' },
		{ title:'${message("操作")}', align:'center', width:60, renderer:function(val,item){
		terminalInItemIndex++;
		return '<a href="javascript:;" class="deleteTerminal btn-delete">删除</a>';
		}},
	];
	var $tmGrid=$('#table-terminal').mmGrid({
		fullWidthRows:true,
		height:'auto',
        cols: cols,
        checkCol: false,
        autoLoad: true,
         callback:function(){

         }
    });
    
    // 删除终端设备
    $deleteTerminal.live("click", function() {
        var index = $(this).closest("tr").index();
		$.message_confirm('您确定要删除吗？',function(){
			$tmGrid.removeRow(index);
		})
    });
    
    //初始默认为多边形 禁用圆心和半径
    $("#longitude").prop("disabled", true).addClass("_disabled");
    $("#latitude").prop("disabled", true).addClass("_disabled");
   	$("#radius").prop("disabled", true).addClass("_disabled");
    
    //改变类型
    $("#type").change(function(){
    	//清除区域
		bmap.map.clearOverlays();
    	var type=$(this).val();
    	chageDrawingManager(type);

    });
	
	$("#drawcircle").click(function(){
		drawcircle();
    });
});	

function drawcircle(){
	var map =bmap.map;
	if( $("#radius").val() != "" 
		&& $("#radius").val() != undefined){
			//清除区域
			map.clearOverlays();
			// 初始化圆
			var point = new BMap.Point($("#longitude").val(), $("#latitude").val());
			var circle = new BMap.Circle(point,$("#radius").val(),bmap.styleOptions);
			map.addOverlay(circle);
			try {
				circle.enableEditing();    // 设置点可编辑
			} catch (e) {
			}
			// myPolygon地图加载出来的 覆盖物的属性发生变化时触发 刚加载地图的时候就已经有区域了
			// 随便移动(区域属性变化)则立即获取坐标
			circle.addEventListener("lineupdate", function(e) {  
				bmap.showLatLon(e.currentTarget);
			});
			// 以最佳的视图显示轨迹坐标
			var viewport = bmap.map.getViewport([circle.getBounds().getSouthWest(),circle.getBounds().getNorthEast()]);
			bmap.map.centerAndZoom(viewport.center, viewport.zoom);
	}
}

function chageDrawingManager(type) {
	if(type==0){
		$("#hidPoints").prop("disabled", true).addClass("_disabled");
		$("#longitude").prop("disabled", false).removeClass("_disabled");
		$("#latitude").prop("disabled", false).removeClass("_disabled");
		$("#radius").prop("disabled", false).removeClass("_disabled");
		$("#hidPoints").val('');
		$(".BMapLib_polygon").addClass("dpn");
		$(".BMapLib_rectangle").addClass("dpn");
		$(".BMapLib_circle").removeClass("dpn");
		$(".BMapLib_Drawing").css("right", "-11px");
		$("#drawcircle").removeClass("dpn");
		$("#searchDiv").removeClass("dpn");
		
	}else{
		$("#hidPoints").prop("disabled", false).removeClass("_disabled");
		$("#longitude").prop("disabled", true).addClass("_disabled");
		$("#latitude").prop("disabled", true).addClass("_disabled");
		$("#radius").prop("disabled", true).addClass("_disabled");
		$("#longitude").val('');
		$("#latitude").val('');
		$("#radius").val('');
		$(".BMapLib_circle").addClass("dpn");
		$(".BMapLib_polygon").removeClass("dpn");
		$(".BMapLib_rectangle").removeClass("dpn");
		$(".BMapLib_Drawing").css("right", "-18px");
		$("#drawcircle").addClass("dpn");
		$("#searchDiv").addClass("dpn");
	}
}
function turn(){
	if($("#wgsj").val()==null||$("#wgsj").val()==''){
		$.message_alert("请填写WGS84经度");
		return false;
	}
	if($("#wgsw").val()==null||$("#wgsw").val()==''){
		$.message_alert("请填写WGS84纬度");
		return false;
	}
	ajaxSubmit('',{
		method:'post',
		url:"gps84_to_bd.jhtml",
		data: {longitude : $("#wgsj").val(), latitude: $("#wgsw").val()},
		callback: function(data) {
			var item=data.objx;
			 $("#longitude").val(item.longitude);
			 $("#latitude").val(item.latitude);
// 			if (item.longitude!=null && item.latitude!=null){
// 				setMarker(item, treeNode);
// 				showRangeFences(item.latitude, item.longitude);
// 			}
		}
	});
}
</script>
<style type="text/css">
.dpn{
	display:none !important;
}
</style>
</head>
<body>
	<div class="pathh">
		&nbsp;${message("新增电子围栏")}
	</div>
	<form id="inputForm" action="save.jhtml" method="post" type="ajax" validate-type="validate">
		<div style="height:430px;width:19.2%;float:left;margin:10px 0 10px 15px">
			<table class="input input-edit">
			<tr>
				<th>
					<span class="requiredField">*</span>${message("围栏名称")}:
				</th>
				<td>
					<span class="error-msg"><input type="text" name="name" class="text " maxlength="20"   btn-fun="clear"/></span>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>${message("机构")}:
				</th>
				<td>
					<span class="search" style="position:relative">
					<input type="hidden" name="saleOrgId" class="text saleOrgId" btn-fun="clear" value="${saleOrg.id }"/>
					<input type="text" name="saleOrgName" class="text saleOrgName" maxlength="200" onkeyup="clearSelect(this)" value="${saleOrg.name }" readOnly/>
					<input type="button" class="iconSearch" value="" id="selectSaleOrg">
					</span>
				</td>
			</tr>
			<tr>
				<th>
					${message("判断规则")}:
				</th>
				<td>
					<select id="rule" name="judgmentRule" class="text">
						<option value="0">${message("围栏内操作")}</option>
					</select>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>${message("类型")}:
				</th>
				<td>
					<select name="type" id="type" class="text">
						<option value="1">多边形</option>
						<option value="0">圆</option>
					</select>
				</td>
				<!--<th>
					${message("半径")}:
				</th>
				<td>
					<div class="nums-input ov">
						<input type="button" class="b decrease" value="-"  onMouseDown ="decrease(this,event)">
						<input type="text radius"  class="t"  name="radius" value="" minData="0" oninput="editPrice (this,event)" onpropertychange="editPrice(this,event)" >
						<input type="button" value="+" class="b increase"  onMouseDown ="increase(this,event)">
					</div>	
				</td>
				-->
			</tr>
			<tr>
				<th rowspan="3">
					${message("位置")}:
				</th>
				 <td rowspan="3">
				 <textarea name="points" class="text" id="hidPoints" style="height:100px"></textarea>
				</td>
			</tr>
			<tr></tr>
			<tr></tr>
			<tr>
				<th>
					${message("圆心经度")}:
				</th>
				<td>
					<input type="text" name="longitude" id="longitude" class="text "  btn-fun="clear" />
				</td>
			</tr>
			<tr>
				<th>
					${message("圆心纬度")}:
				</th>
				<td>
					<input type="text" name="latitude" id="latitude" class="text "  btn-fun="clear" />
				</td>
			</tr>
			<tr>
				<th>
					${message("半径(米)")}:
				</th>
				 <td>
				 	<input type="text" name="radius" id="radius" class="text "  btn-fun="clear" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="button" id="drawcircle" class="button ml15" value="${message("地图画圆展示")}" style="float:right;margin-right:0">
				</td>
			</tr>
			<!--<tr>
				<th>
					${message("半径")}:
				</th>
				 <td>
				 	<input type="text" name="radius" id="radius" class="text "  btn-fun="clear" readOnly/>
				</td>
				<th>
					${message("圆心经度")}:
				</th>
				<td>
					<input type="text" name="longitude" id="longitude" class="text "  btn-fun="clear" readOnly/>
				</td>
				<th>
					${message("圆心纬度")}:
				</th>
				<td>
					<input type="text" name="latitude" id="latitude" class="text "  btn-fun="clear" readOnly/>
				</td>
				<th></th><td></td>
			</tr>-->
			</table>
		</div>
		<div id="map" style="height:430px;width:78%;float:left;margin:10px">
		</div>
		
			<input id="search" type="text" class="searchbox-content-common" style="margin-left:20%"/>
			<input type="button" id="" class="searchbox-content-common search_map button" onClick="search_key()" style="margin-left:20%"/>
			<div id="searchResultPanel" class="searchResultPanel"></div>
		
		
		<div class="ui3-control-wrap">
			<div class="left float-l"> 
			   <div class="trafficopt map" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_type"></span>
				    <i>地图类型</i> 
				    </ul>
			   <div class="hidden-box-map" style="display:none;">
			    	<ul> 
				    	<span class="span_map1"></span>
					    <i style="color: #579AFC" onClick="bmap.changeMapType(BMAP_NORMAL_MAP);">平面地图</i> 
				  	</ul> 
				  	<ul> 
				    	<span class="span_map2"></span>
					    <i onClick="bmap.changeMapType(BMAP_HYBRID_MAP);">卫星地图</i> 
				  	</ul> 
				</div>
			   </div> 
			    <b></b>
			   <div class="trafficopt tool" map-on-click="traffic"> 
			   		<ul>
				    <span class="span_map_tool"></span>
				    <i>工具箱</i> 
				    </ul>
			   <div class="hidden-box-tool" style="display:none;">
				  	<ul> 
				    	<span class="span_map_ruler"></span>
					    <i onClick="bmap.opanRanging();">测距</i> 
				  	</ul> 
				</div>
			   </div> 
		  </div>
		  </div>
			   
		
		<div class="tabContent">
			<table class="input input-edit">
			<tr>
				<th>
					${message("备注")}:
				</th>
				<td colspan="3">
					<textarea name="remark" class="text" id="note"></textarea>
				</td>
			</tr>
			<tr class="border-L2">
                <th>${message("终端设备")}:</th>
                <td colspan="7">
	                <a href="javascript:;" id="addTerminal" class="button">选择终端设备</a>
                </td>
            </tr>
           <tr class="border-L2">
            	<td colspan="8">
            		<div>
						<table id="table-terminal"></table>
					</div>
            	</td>
            </tr>
		</table>
		</div>
		<div class="fixed-top">
			<div id="searchDiv" style="display: inline-block;float: left;margin-top: -7px;border: none;margin-right: 240px;">
			 <div id="search-content" >
			 	<dl>
					<dt><p>${message("WGS84经度")}:</p></dt>
					<dd>
						<input type="text"  class="text" id="wgsj" value="" />
					</dd>
				</dl>
				<dl>
					<dt><p>${message("WGS84纬度")}:</p></dt>
					<dd>
						<input type="text"  class="text" id="wgsw" value="" />
					</dd>
				</dl>
				<dl>
					<dt><input type="button" onclick="turn()" class="button sureButton" value="${message("WGS84转百度坐标系")}" /></dt>
					
				</dl>
        	</div>
		</div>
		
			<input type="button" onclick="bmap.clearAll()" class="button ml15" value="${message("清除所画区域")}">
			<input type="submit" id="submit_button" class="button sureButton" value="${message("1013")}" />
			<input type="button" onclick="location.reload(true);" class="button resetButton ml15" value="${message("重置")}">
		</div>
	</form>
</body>

<script type="text/javascript">
	/**
 * 实例化地图
 * 
 * 初始化地图id
 * 是否需要绘制区域
 * 是否需要定位
 * 是否需要大小按钮
 * 是否需要搜索按钮
 */
bmap.init('map',true,false,true,true);
var type=$("#type").val();
console.log(type);
chageDrawingManager(type);

</script>

</html>